
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>选择设备</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css?20190817.1">
    <link rel="stylesheet" href="/lib/layui/layui/css/common.css">
    <link rel="stylesheet" href="/lims/css/eleTree.css">
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <script type="text/javascript" src="../../js/jquery/jquery-1.9.1.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/common.js?v=20190726" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js?v=2019080918:09" type="text/javascript" charset="utf-8"></script>
    <style>
        .layui-card-header{
            border-bottom: 1px solid #eee;
        }
        .mbox{
            padding: 8px;
        }
        .inbox{
            padding: 5px;
            padding-right: 30px;
        }
        .deptinput{
            display: inline-block;
            width: 75%;
        }
        .layui-btn{
            margin-left: 10px;
        }
        .layui-btn .layui-icon{
            margin-right: 0px;
        }
        .red{
            color: red;
            font-size: 16px;
        }
        .layui-form-label{
            padding: 8px 15px;
        }
        .layui-card-body{
            display: flex;
        }
        .layui-lf{
            float: left;
            min-width: 16%;
            overflow-x: auto;
            height: 600px !important;
        }
        .layui-rt{
            float: right!important;
            width: 84%;
            margin-left: 5px;
            /*margin-top: -10px;*/
        }
        .treeTitle{
            display: flex;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 30px;
            background-color: #00a0e9;
            color: #fff;
            padding: 15px;
            position: relative;
        }
        .layui-nav-item,.layadmin-flexible{
            position: absolute;
            left: 5px;
            top: 23px;
            z-index: 9999999;
        }
        .rtfix{
            width:200px;
            overflow-x: scroll;
            overflow-y: scroll;
            max-height: 321px!important;
        }
        .bg{
            background-color: #F2F2F2;
        }
        .bgs{
            background-color: #F2F2F2;
        }
        .back{
            background-color: #ccc;
        }
        .eleTree{
            cursor: pointer;
        }
        .layui-table-view .layui-table td, .layui-table-view .layui-table th{
            padding: 3px 0;
        }
        .layui-tab-title{
            height: 30px;
        }
        .layui-tab-title li{
            height: 36px;
        }
        .layui-tab layui-tab-card{
            margin-top: -4px;
        }
        .layui-tab-card>.layui-tab-title .layui-this:after {
            border-width: 0px;
        }
        .baseinfo td{
            padding: 5px 2px;
        }
        .active{
            display: none;
        }
        .back{
            background-color: #F2F2F2;
        }
        .layui-table{
            width:100%!important;
        }
        .layui-table-view{
            margin: 10px 5px;
        }
        .btnbox{
            position: relative;
            width: 100%;
            height: 40px;
            line-height: 40px;
        }
        #add{
            height: 30px;
            line-height: 30px;
            position: absolute;
            margin-left: -32px;
            left: 42%;
        }
        #del{
            height: 30px;
            line-height: 30px;
            position: absolute;
            margin-left: -32px;
            left: 60%;
        }
        .layui-input{
            height: 32px;
            line-height: 32px;
        }
    </style>
</head>
<body>

<div class="mbox">
    <div class="layui-card">
        <div class="layui-card-body" style="padding:5px 6px;">
            <div class="layui-lf rtfix">
                <div class="treeTitle" id="equip" dataType="0" >设备类别</div>
                <div class="panel-body">
                    <div class="eleTree ele1" lay-filter="data1"></div>
                </div>
            </div>
            <div class="layui-rt" style="position: relative">
                <div class="layui-tab layui-tab-card">
                    <table id="Settlement" lay-filter="SettlementFilter"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="btnbox">
        <button id="add" class="layui-btn layui-btn-normal">添加</button>
        <button id="del" class="layui-btn layui-btn-normal">删除</button>
    </div>
    <div class="layui-card">
        <div class="layui-card-body" style="padding:5px 6px;">
            <div class="layui-tab layui-tab-card" style="width: 100%;">
                <table id="selectTable" lay-filter="selectTableFilter"></table>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="demoTable" style="position:absolute;right: 18%;top: 10px;width: 600px;height: 30px">
        <label style="float: left;width: 60px;">查询字段</label>
        <div class="layui-input-inline" style="float:left;">
            <select name="searchcloumn" placeholder="请选择" style="height: 10px">
                <option value="">请选择查询字段</option>
                <option value="EQUIP_NAME">设备名称</option>
                <option value="EQUIP_STATUAS_CODE">资产状态</option>
                <option value="MODEL_NO">型号</option>
                <option value="SPEC">规则</option>
            </select>
        </div>
        <div style="float: left">
            <div class="layui-inline">
                <input class="layui-input" name="searchValue"  autocomplete="off" style="height: 32px;margin-left: 6px;">
            </div>
            <button class="layui-btn" onclick="serach()" style="height:30px;line-height: 30px; ">搜索</button>
        </div>
    </div>
</script>
<script type="text/html" id="barOperation">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit1">归还</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >详情</a>
</script>
<script type="text/html" id="barOperation1">
    <a class="layui-btn layui-btn-xs" lay-event="edit">归还</a>
</script>
<script type="text/javascript">
    var el
        ,aldata
        ,newstr='<div class="iptbox mnodec" pid="">'+
        '<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="序号" class="layui-input pnul">'+
        '<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="名称" class="layui-input shorts">'+
        '<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="备注" class="layui-input longs">'+
        '<div class="btnls">'+
        '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm limsAdd"><i class="layui-icon"></i></button>'+
        '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm limsDel"><i class="layui-icon"></i></button>'+
        '</div>'+
        '</div>';
    var name;
    var pid;
    var idkey;
    $('.rtfix').css('max-height',autodivheight()-55)
    var SettlementTable;
    var selectTable;
    var searchColum;  //模糊下拉选中类型
    var searchvalue;    //搜索框值
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    var deptId = getQueryString("deptId");;
    layui.use(['table','layer','form','element','eleTree'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var eleTree = layui.eleTree;
        var element = layui.element;
        var $ = layui.jquery;
        // 树右侧表格实例
        SettlementTable=layui.table.render({
            elem: '#Settlement'
            ,data:[]
            ,url: ''//数据接口
            ,toolbar:'#toolbar'
            ,cols: [[ //表头
                {type: 'checkbox' }
                ,{field: 'equipNo', title: '固定资产编码'}
                ,{field: 'equipName', title: '设备名称'}
                ,{field: 'equipTypeName', title: '设备类型'}
                ,{field: 'deptName', title: '所属部门'}
                ,{field: 'equipStatuasId', title: '资产状态'}
                ,{field: 'modelNo', title: '型号'}
                ,{field: 'spec', title: '规格'}
            ]]
            ,limit:5
            ,done:function(){
                $(".layui-laypage-limits").hide()
            }
        });
        // 树下方表格实例
        selectTable=layui.table.render({
            elem: '#selectTable'
            ,data:[]
            ,url: ''//数据接口
            // ,toolbar:'#toolbar'
            ,cols: [[ //表头
                 {type: 'checkbox',LAY_CHECKED:true }
                ,{field: 'equipNo', title: '固定资产编码'}
                ,{field: 'equipName', title: '设备名称'}
                ,{field: 'equipTypeName', title: '设备类型'}
                ,{field: 'deptName', title: '所属部门'}
                ,{field: 'equipStatuasId', title: '资产状态'}
                ,{field: 'modelNo', title: '型号'}
                ,{field: 'spec', title: '规格'}
            ]]
            ,done:function(res) {
                if(res.data.length==0){
                    $('.layui-form-checkbox').removeClass('layui-form-checked')
                }
            }
        });
        //监听复选框事件
        table.on('checkbox(SettlementFilter)', function(obj){
            var tr = obj.tr[0];
            if(obj.checked){
                $(tr).addClass('bgs')
            }else{
                $(tr).removeClass('bgs').removeClass('bg')
            }
        });
        // 初始化渲染 树形菜单
        el = eleTree.render({
            elem: '.ele1',
            showLine:true,
            url:'/equipmentType/showParentEquipmentType',
            lazy: true,
            load: function(data,callback) {
                $.post('/equipmentType/showChildEquipmentType?equipTypeId='+data.id,function (res) {
                    callback(res.data);//点击节点回调
                })
            },
            done:function (data) { //渲染完成回调
                aldata = data.data
                name=data.data[0].name //传的是默认选中的值
                pid = data.data[0].equipTypePid;
                idkey=data.data[0].id
                var dataid=$('.ele1 div').attr("data-id")
                $('.eleTree-node').removeClass('back')
                $('.ele1 div[data-id='+dataid+']').addClass('back')
                $('.eleTree-node-group').css('background','#fff')
                table.reload('Settlement',{
                    url : '/EquipBorrow/getequipmentBydeptid?equipTypeId='+idkey + '&deptId='+deptId,
                })
            }
        });
        // 节点点击事件
        eleTree.on("nodeClick(data1)",function(d) {
            $('.eleTree-node').removeClass('back')
            $(d.node[0]).addClass('back')
            $('.eleTree-node-group').css('background','#fff')
            var obj = d.data.currentData
            name = obj.name
            pid = obj.equipTypePid;
            idkey = obj.id;
            var currentPage = 1
            table.reload('Settlement',{
                url : '/EquipBorrow/getequipmentBydeptid?equipTypeId='+obj.id+ '&deptId='+deptId,
                data:{page:currentPage},
                page:{
                    curr:currentPage
                }
            })
        });
        //添加按钮事件
        $("#add").click(function () {
            var arr1=[];
            var arr2 = layui.table.cache["selectTable"];
            var checkStatus = table.checkStatus('Settlement').data;
            for(var i=0;i<checkStatus.length;i++){
                arr1.push(checkStatus[i]);
            }
            var arr = arr1.concat(arr2);
            // 数组对象去重
            var result = [];
            var obj = {};
            for(var i =0; i<arr.length; i++){
                if(!obj[arr[i].equipId]){
                    result.push(arr[i]);
                    obj[arr[i].equipId] = true;
                }
            }
            if(checkStatus==undefined||checkStatus.length<=0){
                layer.msg("请选中一条或者多条数据进行添加");
            }
            if (checkStatus != undefined && checkStatus.length > 0) {
                var msg=0;
                for(var i=0;i<checkStatus.length;i++){
                    if(checkStatus[i].equipTypeCode=="EQUIP_LEND"){
                        msg++;
                    }
                }
                if(msg>0){

                    layer.msg('您选择设备现在处于借出状态，请谨慎添加', {time:1000,end:function(){
                        selectTable.reload({
                            data:result,

                        })
                    }});
                }else {

                    selectTable.reload({
                        data:result,

                    })
                }

            }
        })
        // 删除事件
        $("#del").click(function () {
            var ar = layui.table.cache["selectTable"];
            var checkStatus = table.checkStatus('selectTable').data;
            for(var i=0;i<checkStatus.length;i++){
                deleteItem(checkStatus[i].equipId, ar);
            }
            if(checkStatus==undefined||checkStatus.length<=0){
                layer.msg("请选中一条或者多条数据进行删除");
            }
            if (checkStatus != undefined && checkStatus.length > 0) {
                selectTable.reload({
                    data:ar
                })
            }
        })
    });
    function deleteItem (item, list) {
        for (var key in list) {
            if (list[key].equipId === item) {
                list.splice(key, 1)
            }
        }
    };
    function getData() {
/*
        var data = layui.table.cache["selectTable"];
*/
        var data = layui.table.checkStatus('selectTable').data;
        return data;
    };
    $("#equip").click(function(){
        window.location.reload()
    })
    $('#fixed').click(function(e){
        e.stopPropagation();
        $('table').width('100%')
        if($(this).attr('dataType')!=1){
            $('.layui-lf').fadeOut();
            $('.layui-rt').animate({width: '100%'});
            $(this).attr('dataType','1');
        }else{
            $('.layui-lf').fadeIn();
            $('.layui-rt').animate({width: '84%'});
            $(this).attr('dataType','0');
        }

    })
    //wss模糊查询
    function serach(){
        searchvalue=$(".demoTable").find("input").eq(1).val();
        searchColum=$(".demoTable").find("dl dd.layui-this").attr("lay-value");
        if((searchvalue!="")&&(searchColum==undefined)){
            layer.msg("请选择查询的字段");
            return false;
        }else if((searchvalue=="")&&(searchColum!=undefined)){
            layer.msg("请输入查询条件");
            return false;
        }else{
            if(searchColum==undefined){
                searchColum="";
            }
            layui.table.reload('Settlement',{
                url : '/EquipBorrow/getequipmentBydeptid?equipTypeId='+idkey+ '&deptId='+deptId+'&searchValue='+searchvalue+'&searchcloumn='+searchColum,
                done:function(){
                    $(".demoTable").find("input").eq(1).val(searchvalue)
                    $("select[name='searchcloumn']").find('option[value="' + searchColum + '"]').prop('selected', 'selected');
                    layui.form.render();
                }
            })
        }
    }
    function addjData() {
        var jsondata =  layui.table.cache["selectTable"];
        return jsondata;
    }
    function undefind_nullStr(value) {
        if(value==undefined){
            return ""
        }
        return value
    }

</script>
<script>
    //子调父关闭弹框方法
    function close() {
        layer.closeAll();
    }
</script>
<script>

</script>
</body>



</html>
